import React, { Component } from 'react'
import { Form, Input, Button } from 'components/form'
const FormItem = Form.Item
import Styles from './index.less'
@Form.create()
class Login extends Component {
  constructor() {
    super()
    this.confirmBtn = this.confirmBtn.bind(this)
  }
  confirmBtn() {
    this.props.form.validateFields((err, value) => {console.log(err, value)})
  }
  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <div className={Styles.loginPage}>
        <div className={Styles.loginContainer}>
          <div className={Styles.loginDialog}>
            <h2 className={Styles.loginDialogTitle}>会员登录</h2>
            <Form className={Styles.FormContainer}>
              <FormItem>
                {getFieldDecorator('user', {
                  rules: [{
                    required: true, message: '用户名不能为空'
                  }, {
                    type: 'email', message: '邮箱不合法'
                  }]
                })(
                  <Input placeholder="用户名（邮箱）"/>
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('password', {
                  rules: [{
                    required: true, message: '密码不能为空'
                  }]
                })
                (
                  <Input placeholder="密码"/>
                )}
              </FormItem>
              <FormItem>
                <Button onClick={this.confirmBtn}>登录</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    )
  }
}
export default Login
